<template>
  <div class="funds">
    <div class="tabs-header">
      <!-- 历史委托 -->
      <div
        class="tab"
        :class="{'active': tabActive === 1}"
        @click="switchTab(1)"
      >{{$t('trade.historyEntrust')}}</div>
      <!-- 历史成交 -->
      <div
        class="tab"
        :class="{'active': tabActive === 2}"
        @click="switchTab(2)"
      >{{$t('trade.historyDeal')}}</div>
      <!-- 历史平仓 -->
      <div
        class="tab"
        :class="{'active': tabActive === 3}"
        @click="switchTab(3)"
      >{{$t('trade.historyClose')}}</div>
      <!-- 筛选操作 -->
      <div class="handle-group">
        <span class="label">{{$t('trade.date')}}:</span>
        <date-picker
          :value="tiemRange"
          format="yyyy/MM/dd"
          type="daterange"
          placement="bottom-end"
          :placeholder="$t('trade.seldate')"
          @on-change="dealDateTime"
          style="width: 200px"
        ></date-picker>
        <!-- <i-select
          v-model="currency"
          :placeholder="$t('trade.seltype')"
          style="width:200px; margin-left: 20px;"
        >
          <i-option v-for="item in moneyList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>-->
        <div>
          <span class="btn mt16" @click="initHistorical(tabActive, 1)">{{$t('tip.search')}}</span>
        </div>
      </div>
    </div>
    <div class="tabs-content">
      <div class="tab1 tab-body" v-show="tabActive === 1">
        <table border="0" cellspacing="0" cellpadding="0" class="dTable">
          <thead>
            <tr>
              <th>{{$t('trade.contract')}}</th>
              <th>{{$t('trade.status')}}</th>
              <th>{{$t('trade.transition')}}</th>
              <th>{{$t('trade.openClose')}}</th>
              <th>{{$t('trade.entrustPrice')}}</th>
              <th>{{$t('trade.entrustType')}}</th>
              <th>{{$t('trade.entrustVol')}}</th>
              <th>{{$t('trade.entrustTime')}}</th>
            </tr>
          </thead>
          <tbody>
            <!-- 无数据时展示 -->
            <tr v-if="hisCommiList.length === 0" class="noneInfo">
              <td>{{$t('msg.noData')}}</td>
            </tr>
            <!-- 数据列表 -->
            <tr
              v-else
              v-for="(item, index) in hisCommiList"
              :key="index"
              :class="{active: OIndex === index}"
              @click="OIndex = index"
            >
              <!-- 合约名称 -->
              <td>
                <div v-if="item.Name">{{item.Name}}</div>
                <div v-else>--</div>
              </td>
              <!-- 状态 -->
              <td>
                <div v-if="item.Status">{{item.Status}}</div>
                <div v-else>--</div>
              </td>
              <!-- 买卖 -->
              <td>
                <div v-if="item.Business">{{item.Business}}</div>
                <div v-else>--</div>
              </td>
              <!-- 开平 -->
              <td>
                <div v-if="item.Kaiping">{{item.Kaiping}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托价 -->
              <td>
                <div v-if="item.AveragePrice">{{item.AveragePrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托类型 -->
              <td>
                <div v-if="item.CommiType">{{item.CommiType}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托量 -->
              <td>
                <div v-if="item.TransNo">{{item.TransNo}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托时间 -->
              <td>
                <div v-if="item.DateTime">{{item.DateTime}}</div>
                <div v-else>--</div>
              </td>
            </tr>
            <tr class="statistics" v-if="hisCommiList.length !== 0">
              <td>{{$t('trade.total')}}：</td>
              <td colspan="5"></td>
              <td>{{quantity}}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tab2 tab-body" v-show="tabActive === 2">
        <table border="0" cellspacing="0" cellpadding="0" class="dTable">
          <thead>
            <tr>
              <th>{{$t('trade.contract')}}</th>
              <th>{{$t('trade.transition')}}</th>
              <th>{{$t('trade.openClose')}}</th>
              <th>{{$t('trade.dealPrice')}}</th>
              <th>{{$t('market.vol')}}</th>
              <th>{{$t('trade.fee')}}</th>
              <th>{{$t('capital.currency')}}</th>
              <th>{{$t('trade.transNo')}}</th>
              <th>{{$t('trade.numbering')}}</th>
              <th>{{$t('trade.dealTime')}}</th>
            </tr>
          </thead>
          <tbody>
            <!-- 无数据时展示 -->
            <tr v-if="hisTransList.length === 0" class="noneInfo">
              <td>{{$t('msg.noData')}}</td>
            </tr>
            <!-- 数据列表 -->
            <tr
              v-else
              v-for="(item, index) in hisTransList"
              :key="index"
              :class="{active: TIndex === index}"
              @click="TIndex = index"
            >
              <!-- 合约名称 -->
              <td>
                <div v-if="item.Name">{{item.Name}}</div>
                <div v-else>--</div>
              </td>
              <!-- 买卖 -->
              <td>
                <div v-if="item.Business">{{item.Business}}</div>
                <div v-else>--</div>
              </td>
              <!-- 开平 -->
              <td>
                <div v-if="item.Kaiping">{{item.Kaiping}}</div>
                <div v-else>--</div>
              </td>
              <!-- 成交价 -->
              <td>
                <div v-if="item.AveragePrice">{{item.AveragePrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 成交量 -->
              <td>
                <div v-if="item.TransNo">{{item.TransNo}}</div>
                <div v-else>--</div>
              </td>
              <!-- 手续费 -->
              <td>
                <div v-if="item.HandlingFee">{{item.HandlingFee}}</div>
                <div v-else>--</div>
              </td>
              <!-- 币种 -->
              <td>
                <div v-if="item.Currency">{{item.Currency}}</div>
                <div v-else>--</div>
              </td>
              <!-- 成交编号 -->
              <td>
                <div v-if="item.TranId">{{item.TranId}}</div>
                <div v-else>--</div>
              </td>
              <!-- 报单编号 -->
              <td>
                <div v-if="item.Numbering">{{item.Numbering}}</div>
                <div v-else>--</div>
              </td>
              <!-- 报单时间 -->
              <td>
                <div v-if="item.TranTime">{{item.TranTime}}</div>
                <div v-else>--</div>
              </td>
            </tr>
            <tr class="statistics" v-if="hisTransList.length !== 0">
              <td>{{$t('trade.total')}}：</td>
              <td colspan="3"></td>
              <td>{{quantity2}}</td>
              <td>{{frees}}</td>
              <td colspan="4"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tab3 tab-body" v-show="tabActive === 3">
        <table border="0" cellspacing="0" cellpadding="0" class="dTable">
          <thead>
            <tr>
              <th>{{$t('trade.contract')}}</th>
              <th>{{$t('trade.transition')}}</th>
              <th>{{$t('trade.openAvgPrice')}}</th>
              <th>{{$t('trade.closePrice')}}</th>
              <th>{{$t('trade.closedLot')}}</th>
              <th>{{$t('trade.OGAL')}}</th>
              <th>{{$t('capital.currency')}}</th>
              <th>{{$t('trade.closeTime')}}</th>
              <th>{{$t('trade.dealNo')}}</th>
            </tr>
          </thead>
          <tbody>
            <!-- 无数据时展示 -->
            <tr v-if="hisCloseList.length === 0" class="noneInfo">
              <td>{{$t('msg.noData')}}</td>
            </tr>
            <!-- 数据列表 -->
            <tr
              v-else
              v-for="(item, index) in hisCloseList"
              :key="index"
              :class="{active: CIndex === index}"
              @click="CIndex = index"
            >
              <!-- 合约名称 -->
              <td>
                <div v-if="item.Name">{{item.Name}}</div>
                <div v-else>--</div>
              </td>
              <!-- 买卖 -->
              <td>
                <div v-if="item.Business">{{item.Business}}</div>
                <div v-else>--</div>
              </td>
              <!-- 开仓均价 -->
              <td>
                <div v-if="item.OpeningPrice">{{item.OpeningPrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓价格 -->
              <td>
                <div v-if="item.ClosingPrice">{{item.ClosingPrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓手数 -->
              <td>
                <div v-if="item.ClosedLot">{{item.ClosedLot}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓盈亏 -->
              <td>
                <div v-if="item.ClosePL">{{item.ClosePL}}</div>
                <div v-else>--</div>
              </td>
              <!-- 币种 -->
              <td>
                <div v-if="item.Currency">{{item.Currency}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托时间 -->
              <td>
                <div v-if="item.CloseTime">{{item.CloseTime}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓成交号 -->
              <td>
                <div v-if="item.CloseNo">{{item.CloseNo}}</div>
                <div v-else>--</div>
              </td>
            </tr>
            <tr class="statistics" v-if="hisCloseList.length !== 0">
              <td>{{$t('trade.total')}}：</td>
              <td colspan="3"></td>
              <td>{{quantity3}}</td>
              <td>{{palnum}}</td>
              <td colspan="3"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { DatePicker, Select, Option } from "iview";
import * as trade from "../../../request/trade";
import moment from "moment";
moment.locale("zh-cn");
export default {
  name: "HistoricalTrade",
  components: {
    DatePicker,
    ISelect: Select,
    IOption: Option
  },
  computed: {
    userinfo() {
      return this.$store.getters.userinfo;
    },
    hisCommiList() {
      return this.$store.getters.hiscommilist;
    },
    hisTransList() {
      return this.$store.getters.histranslist;
    },
    hisCloseList() {
      return this.$store.getters.hiscloselist;
    }
  },
  watch: {
    hisCommiList: {
      handler(newVal, oldVal) {
        if (newVal.length !== 0) {
          this.quantity = 0;
          for (const item of newVal) {
            this.quantity += item.TransNo * 1;
          }
        }
      },
      deep: true,
      immediate: true
    },
    hisTransList: {
      handler(newVal, oldVal) {
        if (newVal.length !== 0) {
          this.quantity2 = 0; // 成交量总和
          this.frees = 0; // 手续费总和
          for (const item of newVal) {
            this.quantity2 += item.TransNo * 1;
            this.frees += item.HandlingFee;
          }
        }
      },
      deep: true,
      immediate: true
    },
    hisCloseList: {
      handler(newVal, oldVal) {
        if (newVal.length !== 0) {
          this.quantity3 = 0; // 平仓手数总和
          this.palnum = 0; // 平仓盈亏总和
          for (const item of newVal) {
            this.quantity3 += item.ClosedLot * 1;
            this.palnum += item.ClosePL * 1;
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    let nowDate = moment(new Date()).format("YYYY-MM-DD");
    return {
      tabActive: 1,
      tiemRange: [nowDate, nowDate],
      moneyList: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "人民币"
        },
        {
          value: "3",
          label: "美元"
        }
      ], // 货币列表
      quantity: 0, // 委托价总数量
      quantity2: 0, // 成交量总和
      quantity3: 0, // 平仓手数总和
      palnum: 0, // 平仓盈亏总和
      frees: 0, // 手续费总和
      currency: "0", // 当前选中的币种下拉1人民币3美元
      OIndex: -1, // 历史委托选中
      TIndex: -1, // 历史成交
      CIndex: -1, // 历史平仓
	  sum_num: [], //合计手数
	  sum_yingkui: [] //合计盈亏
    };
  },
  mounted() {
	for(let i=0; i<3; i++){
		this.sum_num.push(0);
		this.sum_yingkui.push(0)
	}
    // 初始化table表格
    setTimeout(()=>{
      this.initHistorical(1);
      this.initHistorical(2);
      this.initHistorical(3);
    },3000)
  },
  methods: {
    switchTab(i) {
      this.tabActive = i;
    },
    dealDateTime(val, type) {
      // console.log(val)
      this.tiemRange = val;
    },
    initHistorical(type, isAu) {
      let that = this;
      // 初始化当前历史委托
      // 发送：41;用户ID;开始时间;截止时间;币种;
      let userId = this.userinfo.uId; // 用户id
      let stratDate = new Date(this.tiemRange[0] + " 00:00:00");
      let endDate = new Date(this.tiemRange[1] + " 23:59:59");
      // console.log('pp:', stratDate)
      stratDate = Math.round(Date.parse(stratDate) / 1000).toString();
      endDate = Math.round(Date.parse(endDate) / 1000).toString();
      // console.log(stratDate, endDate);

      let options = `;${userId};${parseInt(stratDate)};${parseInt(endDate)};${
        this.currency
      };`;

      if (type === 1) {
        options = "41" + options;
      } else if (type === 2) {
        options = "42" + options;
      } else if (type === 3) {
        options = "43" + options;
      }

      // 发送到后台
      if (isAu) this.$store.dispatch("panel/playTipsAudio", 6);
      // this.$store.dispatch("bar/changeLoadings", {
      //   status: true,
      //   msg: this.$t("tip.placeWait1")
      // });
      console.log(options)
      trade.wsSend(options);
    }
  }
};
</script>

<style lang="scss">
.funds {
  .tabs-header {
    .handle-group {
      .ivu-date-picker {
        .ivu-date-picker-rel {
          .ivu-input-wrapper {
            .ivu-input-suffix {
              i {
                line-height: 22px;
              }
            }
            .ivu-input {
              height: 22px;
            }
          }
        }
      }
      .ivu-select {
        margin-left: 10px;
        .ivu-select-selection {
          height: 22px;
          .ivu-select-placeholder {
            height: 22px;
            line-height: 22px;
          }
          .ivu-select-selected-value {
            height: 22px;
            line-height: 22px;
          }
        }
      }
      .ivu-input-wrapper {
        margin-left: 10px;
        .ivu-input-icon {
          height: 22px;
          line-height: 22px;
        }
        .ivu-input {
          height: 22px;
        }
      }
    }
  }
}
</style>


<style lang="scss" scoped>
.funds {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-left: 2px;
}
</style>
